<!-- 
  Demo组件 - 一个简单的示例组件
  功能：展示一段带有特定样式的文本
  说明：该组件仅包含基础的模板和样式，用于演示Vue单文件组件(SFC)的基本结构
-->
<template>
  <!-- 
    模板部分：定义组件的HTML结构
    class="demo"：为容器元素添加CSS类，用于样式控制
  -->
  <div class="demo">
    <!-- 组件展示的文本内容 -->
    这是一个Demo组件
  </div>
</template>

<!-- 
  样式部分：定义组件的CSS样式
  作用域说明：此处未添加scoped属性，样式为全局生效
  如需组件样式隔离，可添加scoped属性（<style scoped>）
-->
<style>
/* 
  针对class为demo的元素定义样式
  包含文本颜色、字体大小和字重的设置
*/
.demo {
  color: red; /* 文本颜色设置为红色 */
  font-size: 20px; /* 字体大小设置为20像素 */
  font-weight: bold; /* 字体设置为粗体 */
}
</style>